//out:../css/
@import url(./base.less);
@vw:3.75vw;
// 头部导航栏
header{
    width:100% ;
    height: (50/@vw);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    text-align: center;
    align-items: center;
    padding: 0 (15/@vw) 0 0;
    justify-content: space-between;
    img{
        width: 100%;
        height: (50 / @vw);
    }
 a{
    display: block;
    width:(80 /@vw) ;
    height:(30 /@vw) ;

  border-radius: (15/@vw);
    background-color: yellow;
 }
 p{
    line-height: (30/@vw);
 }
}
// 搜索
.search{
   margin-top: (50/@vw);
   padding: (10 / @vw) (15 / @vw);
   height: (50/@vw);
   border-radius: (32/@vw);
   
   .txt{
      height: (32 / @vw);
      background-color: #f2f4f5;
      border-radius: (16 / @vw);
      text-align: center;
      line-height: (32 / @vw);
      color: #a1a4b3;
      font-size: (14 / @vw);
   }
   .iconfint{
    font-size: (16/@vw);
   }
}
// banner
.banner{
   padding: 0 (15 / @vw);
   height: (108 / @vw);
   ul{
      li{
         width: (345/@vw);
         height: (108/ @vw);
         img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: (5 / @vw);
         }
      }
   }
}
// 排行榜
.list{
   margin-top: (20/@vw);
   padding: 0 (15 / @vw);
  .content{
  
   li{ display: flex;
      margin-bottom: (16 / @vw);
       .lift{
      margin-right: (20/@vw);
      width: (105/@vw);
      height: (105/@vw);
      img{
         border-radius: (10/@vw);
         width: (105/@vw);
         height: (105/@vw);
      }
   }
   .right{
      a{
         display: block;
         font-size: (12 / @vw);
         color: #a1a4b3;
         line-height: 1.8;
      }
      .more{
         font-size: (14 / @vw);
         color: #333;
         .iconfont {
           font-size: (16 / @vw);
         }
      }
   } 
   }
 
  }
}
// 标题公共样式
.title {
   display: flex;
   justify-content: space-between;
   margin-bottom: (16 / @vw);
   line-height: (25 / @vw);
   h4 {
     font-size: (20 / @vw);
   }
   a {
     font-size: (12 / @vw);
     color: #a1a4b3;
   }
 }
//  推荐歌单
.recommend{
   padding: 0 (15 / @vw);
   ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li{
         margin-bottom: (16/@vw);
         width: (105/@vw);
         height: (143/@vw);
         .pic{
            position: relative;
            width: (105/@vw);
            height: (105/@vw);
            img{
               width: 100%;
               height: 100%;
               object-fit: cover;
               border-radius: (10/@vw);
            }
            .cover{
               position: absolute;
               left: 0;
               bottom: 0;
               width: (70/@vw);
               height: (28/@vw);
               background-color: rgba(0, 0, 0, 0.8);
               border-radius: 0 (10/@vw) 0 (10/@vw);
               line-height: (28/@vw);
               text-align: center;
               color: #fff;
               font-size: (14/@vw);
            }
         }
         .txt{
            font-size: (14/@vw);
         }
      }
   }
}
// 底部下载栏
footer{
    width:(345 /@vw);
    height: (45 /@vw);
    background-color: #f2f3f5;
    padding: 0 (10/@vw) 0 (15/@vw);
    position: fixed;
    bottom: (30/@vw);
    left: (20/@vw);
    display: flex;
    align-items: center;
    border-radius: (22.5 /@vw);
    img{
       width: (36 /@vw); 
       height: (36/@vw);
    }
    p{
      flex: 1;
      font-size: (14 /@vw);
    }
    span{
      width: (32 / @vw);
      height: (32 / @vw);
      background-color: #f2f3f5;
      border-radius: 50%;
      text-align: center;
      line-height: (32 / @vw);
      font-size: (16 / @vw);
    }
}